<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>添加商品</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
</head>

<body>
  <div id="TMM_app">
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
          <form class="layui-form" id="form" action="${path}/goods/add" method="post" lay-filter="component-form-group">
            <div class="form-title">基本信息</div>
            <div class="layui-row">
              <div class="layui-col-md9 layui-col-lg6">
                <div class="layui-row">
                  <div class="layui-col-md6 layui-col-lg6">
                    <div class="layui-form-item">
                      <label class="layui-form-label">产品类型</label>
                      <div class="layui-input-block">
                        <div class="layui-form-mid">服务产品</div>
                      </div>
                    </div>
                  </div>
<%--                  <div class="layui-col-md6 layui-col-lg6">--%>
<%--                    <div class="layui-form-item">--%>
<%--                      <label class="layui-form-label">所属机构</label>--%>
<%--                      <div class="layui-input-block">--%>
<%--                        <div class="layui-form-mid">${hospital.name}</div>--%>
<%--                        <input type="hidden" value="${hospital.name}" name="hospitalName">--%>
<%--                      </div>--%>
<%--                    </div>--%>
<%--                  </div>--%>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">所属类目</label>
                  <div class="layui-input-block">
                    <select name="category_pid" id="category_pid" multiple lay-verify="required" lay-filter="category_pid">
                      <option value="" selected="selected">选择类目</option>
                      <c:forEach items="${categoryList}" var="category">
                        <option value="${category.id}">${category.name}</option>
                      </c:forEach>
                    </select>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">商品名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">商品规格</label>
                  <div class="layui-input-block">
                    <input type="text" name="units" lay-verify="required" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">商品原价</label>
                  <div class="layui-input-block">
                    <input type="text" name="price" lay-verify="required" placeholder="单位 元" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-row">
                  <div class="layui-col-md6 layui-col-lg6">
                    <div class="layui-form-item">
                      <label class="layui-form-label">是否置顶</label>
                      <div class="layui-input-block">
                        <input type="radio" name="is_recommend" value="1" title="是" lay-verify="otherReq">
                        <input type="radio" name="is_recommend" value="2" title="否" lay-verify="otherReq">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">商品介绍</label>
                  <div class="layui-input-block">
                    <textarea name="desc_str" placeholder="请输入商品介绍" class="layui-textarea"></textarea>
                  </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">排序</label>
                  <div class="layui-input-block">
                      <input name="idx" type="text" placeholder="请输入排序" class="layui-input" value="${maxIdx}" />按照20220101000000规格
                  </div>
                </div>
              </div>
              <div class="layui-col-md3 layui-col-lg3 text-center tmm-right-logo">
                <img class="org_logo" src="../../static/img/uploadImg.png" id="logoImg"/>
                <input type="hidden" name="cover_pic" id="cover_pic">
                <div>商品封面图</div>
              </div>
            </div>

            <div class="form-title">商品轮播图</div>
            <div class="layui-form-item">
              <label class="layui-form-label"></label>
              <div class="layui-upload tmm-image-upload">
                <div>
                  <div class="layui-upload-list" id="banner"></div>
                  <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" id="bannerBtn">
                    <i class="layui-icon"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="form-title">商品介绍图</div>
            <div class="layui-form-item">
              <label class="layui-form-label"></label>
              <div class="layui-upload tmm-image-upload">
                <div>
                  <div class="layui-upload-list" id="descPic"></div>
                  <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" id="descPicBtn">
                    <i class="layui-icon"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-input-block">
                <div class="layui-footer">
                  <button class="layui-btn tmm-btn-primary" type="button" lay-submit="" lay-filter="component-form-demo1">
                    提交
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="../../static/lib/layui/layui.js"></script>

  <script>
    layui.config({
      base: "../../static/js/"
    }).extend({
      index: 'index' //主入口模块
    }).use(["index", "form", "laydate", "upload"], function () {
      var $ = layui.$,
        admin = layui.admin,
        element = layui.element,
        layer = layui.layer,
        laydate = layui.laydate,
        upload = layui.upload,
        form = layui.form;

      form.render(null, "component-form-group");

      laydate.render({
        elem: "#LAY-component-form-group-date"
        ,theme: '#d6b284'
      });

      laydate.render({
          elem: "#time"
          ,type:'datetime'
          ,trigger: 'click'
          ,range: true
          ,theme: '#d6b284'
      });

      //产品logo上传
      upload.render({
          elem: "#logoImg"
          ,url: '${path}/upload/uploadFile'
          ,data:{uploadUrl:"goods/"}
          ,size: 2048 //限制文件大小，单位 KB
          ,done: function(data,index,upload){
              if(data.code!=0){
                  layer.msg('上传失败', {
                      offset: '200px'
                      ,icon: 2
                      ,time: 1000
                      ,anim:4
                  }, function(){});
                  return;
              }else{
                  layer.msg('上传成功', {
                      offset: '200px'
                      ,icon: 1
                      ,time: 1000
                      ,anim:4
                  }, function(){});
                  $(this.item[0]).attr("src",data.data);
                  $("#cover_pic").val(data.data);
              }
          }
      });

      upload.render({
        elem: "#bannerBtn",
        url: "${path}/upload/uploadFile",
        data:{uploadUrl:"goods/"},
        size: 2048,
        multiple: true,
        before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {

          });
        },
        done: function (res) {
          //上传完毕
          $("#banner").append(
              '<div class="item"><img src="' +
              res.data +
              '" class="layui-upload-img"><p><a href="javascript:void(0)" onclick="delPic(this)">删除</a></p>' +
              '<input type="hidden" value="'+res.data+'" name="banner" ' +
              '</div>'
          );
        }
      });

      upload.render({
        elem: "#descPicBtn",
        url: "${path}/upload/uploadFile",
        data:{uploadUrl:"goods/"},
        size: 2048,
        multiple: true,
        before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {

          });
        },
        done: function (res) {
          //上传完毕
          $("#descPic").append(
              '<div class="item"><img src="' +
              res.data +
              '" class="layui-upload-img"><p><a href="javascript:void(0)" onclick="delPic(this)">删除</a></p>' +
              '<input type="hidden" value="'+res.data+'" name="desc_pic" ' +
              '</div>'
          );
        }
      });

      /* 自定义验证规则 */
      form.verify({
        title: function (value) {
          if (value.length < 2) {
            return "标题至少得2个字符啊";
          }
        },
        pass: [/(.+){6,12}$/, "密码必须6到12位"],
        content: function (value) {
          layedit.sync(editIndex);
        },
        otherReq: function(value,item){
          var $ = layui.$;
          var verifyName=$(item).attr('name')
                  , verifyType=$(item).attr('type')
                  ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                  ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                  ,isTrue= verifyElem.is(':checked')//是否命中校验
                  ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
          if(!isTrue || !value){
            //定位焦点
            focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
            //对非输入框设置焦点
            focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
              focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
            }).focus();
            return '必填项不能为空';
          }
        }
      });

      /* 监听指定开关 */
      form.on("switch(component-form-switchTest)", function (data) {
        layer.msg("开关checked：" + (this.checked ? "true" : "false"), {
          offset: "6px"
        });
        layer.tips(
          "温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF",
          data.othis
        );
      });

      /* 监听提交 */
      form.on("submit(component-form-demo1)", function (data) {
          var action = $("#form").attr("action");
          var logo = $("#cover_pic").val();
          if(logo==null || logo==''){
              layer.alert("请上传商品封面图", {icon: 2});
              return false;
          }
          var index = layer.load(2);
          $.ajax({
              type:"post",
              url:action,
              dataType:"json",
              data:$('#form').serialize(),
              success:function(data){
                  layer.close(index);
                  if(data.code ==0){
                      layer.alert(data.msg,{icon:1}, function(){
                          location.reload();
                      });
                  }else{
                      layer.alert(data.msg,{icon:2});
                  }
              },
              error:function (data) {
                  layer.close(index);
              }
          });
          return false;
      });
    });
    //删除图片
    function delPic(x) {
        x.parentNode.parentNode.remove();
    }
  </script>
</body>

</html>